<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="left" @click="$router.push('/')">仿知乎专栏</div>
          <div class="right" v-if="!store.state.user.token">
            <router-link to="/login" custom v-slot="{ navigate }">
              <el-button type="primary" plain @click="navigate">登录</el-button>
            </router-link>
            <router-link to="/register" custom v-slot="{ navigate }">
              <el-button type="primary" plain @click="navigate">注册</el-button>
            </router-link>
          </div>
          <el-dropdown v-else style="margin-top: 15px; margin-left: 20px;">
            <el-button type="primary">
              {{ userName
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                 <el-dropdown-item @click="$router.push('/about')">新建文章</el-dropdown-item>
        <el-dropdown-item @click="addcolumn(store.state.user.column)">我的专栏</el-dropdown-item>
        <el-dropdown-item>编辑资料</el-dropdown-item>
                <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import { computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
let userName =  store.state.user.nickName
console.log(userName);
console.log(store.state.user.token);
const loginOut=()=>{
    router.push('/login')
// location.reload()
userName =''
  store.state.user.token = ''
  }
const addcolumn = async (id:string) => {
  console.log(id,54);
  await router.push({
    path:'/column',
    query:{id}
  })

};

</script>
<style lang="scss">
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>
